<template>
	<view class="uiwu">
		<view class="uiwu-goods uiwu-flex-align">
			<image :src="info.img || info.product_image" mode="aspectFill"></image>
			<view class="in">
				<view class="title uiwu-hidden1">{{ info.name || info.product_name }}</view>
				<view class="tips">抓取时间：{{ uiwu.formatTimestamp(info.add_time * 1000) }}</view>
				<view class="tips">机器编号：XF2780</view>
				<view class="tips uiwu-flex-space">
					申诉状态：{{ info.appeal_state == 1 ? '审核中' : info.appeal_state == 2 ? '申诉成功' : info.appeal_state == 3 ?
						'申诉驳回' : '' }}
					<navigator :url="`/pages/index/record?device_id=${info.device_id}`" hover-class="none"
						class="uiwu-flex-center">其他记录</navigator>
				</view>
			</view>
		</view>
		<view class="uiwu-tips">申诉理由</view>
		<view class="uiwu-form">
			<radio-group @change="changeRadio">
				<view class="radio-group uiwu-flex-column">
					<label v-for="(item, index) in stor_reason" :key="index">
						<radio color="#EF821E" style="transform: scale(0.8);" :value="item" /><text>{{ item }}</text>
					</label>
				</view>
			</radio-group>
			<textarea v-model="fromData.appeal_describe" placeholder="详细描述一下问题，字数限制10-300"></textarea>
			<view class="uiwu-form-title">上传截图/凭证</view>
			<view class="uiwu-form-image uiwu-flex">
				<uiwu-button-update v-for="(item, index) in fromData.appeal_proof" :key="index"
					@change="changeImage1($event, index)">
					<view class="uiwu-form-image-update uiwu-flex-center">
						<image :src="item.url" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
					</view>
				</uiwu-button-update>
				<uiwu-button-update @change="changeImage">
					<view class="uiwu-form-image-update uiwu-flex-center">
						<image src="@/static/image/updateimage.png" mode="widthFix" style="width: 32rpx;"></image>
					</view>
				</uiwu-button-update>
			</view>
			<view class="uiwu-form-tips">为了帮您更好的解决问题，请务必上传照片</view>
			<view class="uiwu-form-title">温馨提示</view>
			<view class="uiwu-form-text">
				<text v-for="(item, index) in appeal_tips" :key="index">{{ item }}<br></text>
			</view>
		</view>
		<uiwu-footer v-if="info.appeal_state == 0 || info.appeal_state == 3">
			<view class="uiwu-footer uiwu-flex-center">
				<view class="uiwu-footer-box uiwu-flex-center" @tap="submit(fromData)">提交</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
import { appealreason, grabappeal, grablist, uiwu } from '@/api/interface/interface';
import { onNavigationBarButtonTap, onLoad, onUnload } from '@dcloudio/uni-app';
import { ref } from 'vue';
const stor_reason = ref([]);
const appeal_tips = ref([])
const info = ref({})
const fromData = ref({
	grab_id: '',
	appeal_reason: '',
	appeal_describe: '',
	appeal_proof: []
})
onNavigationBarButtonTap((e) => {
	uiwu.openWindow('/pages/index/problem')
})
const submit = async (e: object): Promise<any> => {
	if (!e.appeal_reason) return uiwu.toast('请选择申诉的理由')
	if (e.appeal_describe.length < 10) return uiwu.toast('字数不能少于10个字')
	if (e.appeal_describe.length > 300) return uiwu.toast('字数不能大于300个字')
	const result = await grabappeal(e);
	if (!result) return
	uiwu.toast('提交成功', 'success')
	setTimeout(() => {
		uni.navigateBack()
	}, 500)
}
const getappealreason = async () => {
	const { data } = await appealreason();
	stor_reason.value = data.stor_reason;
	appeal_tips.value = data.appeal_tips
}
const changeRadio = ({ detail: { value } }) => {
	fromData.value.appeal_reason = value
}
const changeImage1 = ({ data: { url } }, index: number) => {
	fromData.value.refund_proof[index] = {
		type: 'image',
		url
	}
}
const changeImage = ({ data: { url } }) => {
	fromData.value.appeal_proof.push({
		type: 'image',
		url
	})
}
uni.$on('complaintCallback', (e) => {
	info.value = e
	fromData.value.grab_id = info.value.id
})
onUnload(() => {
	uni.$off('complaintCallback')
})
onLoad(async ({ goods, device_id }) => {
	if (!device_id) {
		info.value = JSON.parse(goods)
		fromData.value.grab_id = info.value.id
	} else {
		const { data: { data } } = await grablist({
			limit: 1,
			device_id: device_id
		})
		if (data.length === 0) {
			await uiwu.model({
				title: '温馨提示',
				content: '暂无可申诉的记录，请先玩游戏。'
			})
			uni.navigateBack()
			return
		}
		info.value = data[0]
		console.log(info.value);
		fromData.value.grab_id = info.value.id
	}
	getappealreason()
})
</script>

<style lang="scss">
page {
	background-color: #F6F6F6;
}

.uiwu {
	padding: 24rpx;
}

.uiwu-goods {
	background-color: #fff;
	padding: 24rpx;
	border-radius: 20rpx;

	image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
	}

	.in {
		flex: 1;
		padding-left: 24rpx;

		.title {
			font-size: 28rpx;
			font-weight: 800;
			color: #231815;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			margin-bottom: 10rpx;

			navigator {
				width: 128rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 2rpx solid $qj-red;
				color: $qj-red;
				line-height: 1;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.uiwu-tips {
	font-size: 32rpx;
	font-weight: 800;
	color: #231815;
	padding: 21rpx 24rpx;

	&::after {
		content: "（申诉理由提交后不能修改）";
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
}

.uiwu-form {
	background-color: #fff;
	padding: 24rpx 24rpx 40rpx;
	border-radius: 20rpx;

	.radio-group {
		font-size: 28rpx;
		font-weight: 500;
		color: #444444;

		label {
			margin-bottom: 30rpx;
		}
	}

	textarea {
		width: 100%;
		height: 160rpx;
		background: #F9F9F9;
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 28rpx;
	}

	&-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #231815;
		padding-top: 20rpx;
	}

	&-image {
		padding-top: 20rpx;

		&-update {
			width: 160rpx;
			height: 160rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 0 5rpx;
		}
	}

	&-tips {
		font-size: 24rpx;
		font-weight: 500;
		color: $qj-red;
		margin-top: 20rpx;
	}

	&-text {
		font-size: 24rpx;
		font-weight: 500;
		color: #444444;
		margin-top: 14rpx;
	}
}

.uiwu-footer {

	&-box {
		width: 670rpx;
		height: 80rpx;
		background: $qj-red;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
}
</style>
